<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>18_transform的运用</title>
    <style type="text/css">
        #box{
            width: 50px;
            height: 50px;
            background-color: red;
            /* transform: translate(100px,200px)rotate(10deg) scale(2.0) skew(10deg); */
        }
    </style>
</head>
<body>
    <button id="btn">形变</button>
    <div id="box"></div>
    <script>
        window.onload = function(){
            var btn = document.getElementById('btn');
            var box = document.getElementById('box');
            var index = 0;
            btn.onclick = function(){
                index++;
                box.style.transform = 'translate(${index * 100}px,${index * 50}px) rotate(${index * 10}deg) scale(${index * 1.3})';
            }
        }
    </script>
</body>
</html>